.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: var(--leading-tight);
}
.brand-name {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.025em;
}
.brand-tagline {
  color: var(--action-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.2em;
}
.brand:hover {
  color: var(--action-primary);
}
.brand[data-variant='inverse'],
.brand[data-variant='inverse'] .brand-tagline {
  color: var(--ink-inverse);
}